<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/pc_common.css">
    <link rel="stylesheet" href="../inf/font_n5t1ksdn35/iconfont.css">
    <link rel="stylesheet" href="../css/regi.css">

</head>
<div class="header-box">
    <div class="header">

        <a href="../html/index.html"> <img src="https://timeclub.danielwellington.cn/assets/img/icons/logo.svg"
                alt=""></a>

    </div>
    <div class="nav">
        <ul>
            <li><a href="../html/detail.html">会员活动</a></li>
            <li><a href="../html/detail.html">手表</a></li>
            <li><a href="../html/detail.html">配饰</a></li>
            <li><a href="../html/detail.html">礼品套装</a></li>
            <li><a href="../html/detail.html">表带</a></li>
        </ul>
    </div>

</div>
<div class="banner-box">
    <div class="banner">
        <p>独家礼遇 会员尊享</p>
        <p>悦享爱意，报以时光</p>
        <p>S H A R E &nbsp;&nbsp; L O V E R &nbsp;&nbsp;E T U R N &nbsp;&nbsp;I N&nbsp;&nbsp; T I M E</p>
    </div>
</div>
<form action="">
    <br action="">
    <p>姓名</p>
    <input type="text" placeholder="请输入姓名" class="userName">
    <p class="tips"></p>
    <p>称谓</p>
    <select name="" id="">
        <option value="">先生</option>
        <option value="">女士</option>
    </select>
    <p>手机号码</p>
    <input type="text" placeholder="请输入您的手机号码" class="phone">
    <p class="tips"></p>
    <p>验证码</p>
    <div class="yz">
        <div class="mc"></div>
        <input type="text" class="yzm" placeholder="请输入短信验证码">
        <span><a href="javascript:" class="rest">获取验证码</a></span>
        <p class="tips"></p>
    </div>
    <div class="agree">
        <span class="tick"></span>
        <p>我已阅读并同意</p>
        <a href="https://www.danielwellington.cn/member-terms/">《DANIEL WELLINGTON会员协议</a>
        <p>及</p>
        <a href="https://www.danielwellington.cn/member-privacy-policy/">《DANIELWELLINGTON会员俱乐部个人信息保护政策》</a>
    </div>
    <div class="random"><span>请阅读并同意上述条款</span></div>
    <div class="sign">即刻加入</div>
    <div class="msg">
        <span>已经是会员？</span>
        <a href="">立即登录</a>
    </div>
    <div class="line"></div>
    <div class="type">
        <p>使用第三方账号</p>
        <p>
            <a href=""> <span class="iconfont icon-weixin"></span></a>
            </span>
            <a href=""><span class="iconfont icon-weibo"></span></a>

        </p>
    </div>
</form>
<div class="botton-box">
    <div class="botton">
        <div class="helpMsg">
            <ul>
                <li><a href=""><span>防伪声明</span><span>l</span></a></li>
                <li><a href=""><span>使用条款</span><span>l</span></a></li>
                <li><a href=""><span>隐私政策</span><span>l</span></a></li>
                <li><a href=""><span>网站地图</span></a></li>
            </ul>
        </div>

        <div class="msg">
            <img src="../img/gh.png" alt="">
            <a href=""><span>粤公网安备 44030502000796号</span></a>
            <a href=""><span>粤ICP备15098750号</span></a>
            <a href=""><span class="borderR">营业执照</span></a>
        </div>
        <div class="company">
            <p>ALL RIGHTS RESERVED. COPYRIGHT © 丹尼尔惠灵顿贸易（深圳）有限公司</p>
        </div>
    </div>

</div>
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/api.js"></script>
<script src="../js/cookie.js"></script>

<script>


    var userflag = false
    var phoneflag = false
    var yzmflag = false
    var tickflag = false
    var ticknumber = 1
    $("input").click(function () {
        $(this).css({ boxShadow: " 0 0 8px 0 rgba(0,0,0,.25)" })
    })
    $("input").blur(function () {

        $(this).css({ boxShadow: "none" })
    })
    $(document).on("blur", ".userName", function () {
        console.log($(".userName"));
        var username = $(this).val();
        var x = new RegExp(/^([\u4e00-\u9fa5]|[a-zA-Z_]){1,6}/);
        if (x.test(username)) {
            $(".userName").addClass("tipsBlue");
            $(".userName").next().text("");
            userflag = true
        } else {
            $(".userName").addClass("tipsRed").removeClass(".tipsBlue");
            if (username) {

                $(".userName").next().text("姓名只支持中英文");
            } else {
                $(".userName").next().text("请输入你的姓名");
            }


        }
    })
    $(document).on("blur", ".phone", function () {
        var phone = $(this).val();
        var x = new RegExp(/^1[3-9]\d{9}$/);
        console.log(phone);
        if (x.test(phone)) {
            isExist({ phone }).then(function (result) {
                var { status, detail } = result
                if (status) {
                    $(".phone").addClass("tipsBlue");
                    $(".phone").next().text(detail);
                    phoneflag = true
                } else {
                    $(".phone").addClass("tipsRed");
                    $(".phone").next().text(detail);
                }
            })
        } else {
            $(".phone").addClass("tipsRed");
            $(".phone").next().text("请输入11位正确手机号码");
            phoneflag = false
        }
    })



    $(document).on("click", ".rest", function () {
        console.log(1);
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
        var str = ""
        for (var i = 0; i < 4; i++) {
            var x = Math.floor(Math.random() * (arr.length))
            str += arr[x]
        }
        $(this).text(str).siblings(".mc");
        $(".mc").remove();
        // console.log($(this).text(str).siblings(".mc"));
    })
    $(document).on("blur", ".yzm", function () {
        var yzm = $(".rest").text();
        var x = $(this).val();
        if (x == yzm) {
            $(".yzm").addClass("tipsBlue");
            $(".yzm").next().next().text("");
            yzmflag = true
        } else {
            yzmflag = false
            $(".yzm").addClass("tipsRed");
        }
    })
    $(document).on("click", ".tick", function () {
        ticknumber++
        if (ticknumber % 2 == 0) {
            $(this).text("✔")
            $(".random").children("span").text("");
            tickflag = true
        } else {
            $(this).text("");
            $(".random").children("span").text("请阅读并同意上述条款");
            tickflag = false
        }

    })
    $(document).on("click", ".sign", function () {
        if (userflag & phoneflag & yzmflag & tickflag) {
            var phone = $(".phone").val();
            var user = $(".userName").val();

            register({ user, phone }).then(function (result) {
                var { status, detail } = result;
                if (status) {
                    alert(detail);
                    console.log(detail);
                    location.href = "../html/sign.html";
                } else {
                    alert(detail)
                    location.reload();
                }
            })

        }
    })

</script>

</html>